<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="commons/template_head::head('sShopping')">

</head>
<body>

<script>
  var tian = function(){
    alert("添加商品成功！！");
  }

  var xui = function(){
    alert("修改商品成功！！");
  }
  var shan = function(){
    alert("删除商品成功！！");
  }
</script>

<!-- begin::preloader-->
<div th:replace="commons/layout::preloader">

</div>
<!-- end::preloader -->

<!-- begin::navigation -->
<div th:replace="commons/layout::navigation">

</div>
<!-- end::navigation -->

<!-- begin::main -->
<div id="main">

  <!-- begin::header -->
  <div th:replace="commons/layout::main_header">

  </div>
  <!-- end::header -->

  <!-- begin::main-content -->
  <div class="main-content bg-info-bright" style="background-color: #e0ffff!important;">

    <!-- begin::container -->
    <div class="container">

      <!--               轮播图 begin -->
      <div class="row">
        <div class="col-xl-12">
          <div id="carousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#carousel" data-slide-to="0" class="active"></li>
              <li data-target="#carousel" data-slide-to="1"></li>
            </ol>
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img src="/assets/media/image/fruite.jpg" class="d-block w-100" alt="111111">
              </div>
              <div class="carousel-item">
                <img src="/assets/media/image/phones.jpg" class="d-block w-100" alt="222222">
              </div>

            </div>
            <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            </a>

            <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
            </a>
          </div>
        </div>
      </div>
      <!--                轮播图 end-->


      <!--                产品介绍 begin-->
      <div class="text-center"><h2 class="pb-2 border-bottom bg-white mt-2 text-center">善融购物</h2>
        <!--bootstrap实现弹出模态框-->
        <button class="btn btn-default bg-info mb-2" data-target="#myModal" data-toggle="modal" th:if="${session.userNum=='Gary'}">
          添加商品
        </button>
        <!--fade 弹入弹出-->
        <div class="modal fade"  id="myModal" aria-labelledby="myModallabel" aria-hidden="true" tabindex="-1">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title text-center" id="myModallabel">添加商品</h5>
                <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
              </div>
              <form id="formData" class="form-horizontal">
                <div class="modal-body">
                  <div class="form-group">
                    <div class="input-group">
                      <span class="input-group-addon" id="sizing-addon1">商品名称：</span>
                      <input type="text" class="form-control" placeholder="产品名称" aria-describedby="sizing-addon2">
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="input-group">
                      <span class="input-group-addon" id="sizing-addon2">商品价格：</span>
                      <input type="text" class="form-control" placeholder="￥" aria-describedby="sizing-addon2">
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="input-group">
                      <span class="input-group-addon" id="sizing-addon3">是否包邮：</span>
                      <input type="text" class="form-control" placeholder="包邮/不包邮" aria-describedby="sizing-addon2">
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="input-group">
                      <span class="input-group-addon" id="sizing-addon4">商品简介：</span>
                      <input type="text" class="form-control" placeholder="商品简介" aria-describedby="sizing-addon2">
                    </div>
                  </div>

                  <button type="button" id="btnImg" class="btn btn-default" data-dismiss="modal">菜品样图</button>
                  <img style="width:100px;height:100px" id="imgEmdImg" class="img-circle">
                  <from id="videoForm">
                    <input id="txt_file" type="file">
                  </from>

                </div>

                <div class="modal-footer">
                  <button class="btn btn-default" type="button" data-dismiss="modal">返回</button>
                  <button class="btn btn-success" type="button" data-dismiss="modal" onclick="tian();">提交</button>
                </div>
              </form>
            </div>
          </div>
        </div>

        <!--fade 修改弹入弹出-->
        <div class="modal fade"  id="XmyModal" aria-labelledby="XmyModallabel" aria-hidden="true" tabindex="-1">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title text-center" id="XmyModallabel">修改商品</h5>
                <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
              </div>
              <form id="XformData" class="form-horizontal">
                <div class="modal-body">
                  <div class="form-group">
                    <div class="input-group">
                      <span class="input-group-addon" id="sizing-addon5">商品名称：</span>
                      <input type="text" class="form-control" placeholder="产品名称" aria-describedby="sizing-addon2">
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="input-group">
                      <span class="input-group-addon" id="sizing-addon6">商品价格：</span>
                      <input type="text" class="form-control" placeholder="￥" aria-describedby="sizing-addon2">
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="input-group">
                      <span class="input-group-addon" id="sizing-addon7">是否包邮：</span>
                      <input type="text" class="form-control" placeholder="包邮/不包邮" aria-describedby="sizing-addon2">
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="input-group">
                      <span class="input-group-addon" id="sizing-addon8">商品简介：</span>
                      <input type="text" class="form-control" placeholder="商品简介" aria-describedby="sizing-addon2">
                    </div>
                  </div>

                  <button type="button" id="XbtnImg" class="btn btn-default" data-dismiss="modal">菜品样图</button>
                  <img style="width:100px;height:100px" id="XimgEmdImg" class="img-circle">
                  <from id="videoForm">
                    <input id="Xtxt_file" type="file">
                  </from>

                </div>

                <div class="modal-footer">
                  <button class="btn btn-default" type="button" data-dismiss="modal">返回</button>
                  <button class="btn btn-success" type="button" data-dismiss="modal" onclick="xui();">提交</button>
                </div>
              </form>
            </div>
          </div>
        </div>

        <!--fade 删除弹入弹出-->
        <div class="modal fade"  id="myModal2" aria-labelledby="myModallabel2" aria-hidden="true" tabindex="-1">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title text-center" id="myModallabel2">删除产品</h5>
                <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
              </div>
              <form id="formData2" class="form-horizontal">
                <div class="modal-body">
                  <p class="text-danger text-center">删除商品后将永久删除并无法恢复，确认删除？</p>

                </div>
                <div class="modal-footer">
                  <button class="btn btn-default" type="button" data-dismiss="modal">取消</button>
                  <button class="btn btn-danger" type="button" data-dismiss="modal" onclick="shan();">删除</button>
                </div>
              </form>
            </div>
          </div>
        </div>

      </div>

      <div class="row text-center">
        <div class="col">
          <div class="card">
            <div class="card-header py-3">
              <p class="my-0 fw-normal">广西大西芹蔬菜,源产地直发，现摘现发。</p>
              <h5 class="text-danger">￥2.00/斤</h5>
              <p>包邮（偏远地区除外）</p>
              <div class="btn-group" role="group" aria-label="...">
                <button class="btn btn-default bg-success mb-2" data-target="#XmyModal" data-toggle="modal"  th:if="${session.userNum=='Gary'}">修改</button>
                <button class="btn btn-default bg-danger mb-2" data-target="#myModal2" data-toggle="modal"  th:if="${session.userNum=='Gary'}">删除</button>
              </div>
            </div>
            <div class="card-body">
              <div class="carousel-item active">
                <img src="/assets/media/image/shopping/shucai(1).jpg" class="d-block w-100" alt="111111">
              </div>

            </div>
            <button type="button" class="btn btn-lg btn-primary">
              <a href="/sShoppingM">立即购买</a></button>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <div class="card-header py-3">
              <p class="my-0 fw-normal">云南小彩芒果，源产地直发，现摘现发。</p>
              <h5 class="text-danger">￥2.80/斤</h5>
              <p>包邮（偏远地区除外）</p>
              <div class="btn-group" role="group" aria-label="...">
                <button class="btn btn-default bg-success mb-2" data-target="#XmyModal" data-toggle="modal"  th:if="${session.userNum=='Gary'}">修改</button>
                <button class="btn btn-default bg-danger mb-2" data-target="#myModal2" data-toggle="modal"  th:if="${session.userNum=='Gary'}">删除</button>
              </div>
            </div>
            <div class="card-body">
              <div class="carousel-item active">
                <img src="/assets/media/image/shopping/shuiguo(1).jpg" class="d-block w-100" alt="111111">
              </div>

            </div>
            <button type="button" class="w-100 btn btn-lg btn-primary">
              <a href="/sShoppingM">立即购买</a></button>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <div class="card-header py-3">
              <p class="my-0 fw-normal">云南特色红茶，源产地直发，品质有保障。</p>
                <h5 class="text-danger">￥26.80/斤</h5>
                <p>包邮（偏远地区除外）</p>
              <div class="btn-group" role="group" aria-label="...">
                <button class="btn btn-default bg-success mb-2" data-target="#XmyModal" data-toggle="modal"  th:if="${session.userNum=='Gary'}">修改</button>
                <button class="btn btn-default bg-danger mb-2" data-target="#myModal2" data-toggle="modal"  th:if="${session.userNum=='Gary'}">删除</button>
              </div>
            </div>
            <div class="card-body">
              <div class="carousel-item active">
                <img src="/assets/media/image/shopping/chaye(1).jpg" class="d-block w-100" alt="111111">
              </div>

            </div>
            <button type="button" class="w-100 btn btn-lg btn-primary">
              <a href="/sShoppingM">立即购买</a></button>
          </div>
        </div>
      </div>
      <div class="row text-center">
        <div class="col">
          <div class="card">
            <div class="card-header py-3">
              <p class="my-0 fw-normal">江苏阳澄湖小龙虾，源产地直发，新鲜有保障。</p>
                <h5 class="text-danger">￥30.80/斤</h5>
                <p>包邮（偏远地区除外）</p>
              <div class="btn-group" role="group" aria-label="...">
                <button class="btn btn-default bg-success mb-2" data-target="#XmyModal" data-toggle="modal"  th:if="${session.userNum=='Gary'}">修改</button>
                <button class="btn btn-default bg-danger mb-2" data-target="#myModal2" data-toggle="modal"  th:if="${session.userNum=='Gary'}">删除</button>
              </div>
            </div>
            <div class="card-body">
              <div class="carousel-item active">
                <img src="/assets/media/image/shopping/shuichan(1).jpg" class="d-block w-100" alt="111111">
              </div>

            </div>
            <button type="button" class="w-100 btn btn-lg btn-primary">
              <a href="/sShoppingM">立即购买</a></button>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <div class="card-header py-3">
              <p class="my-0 fw-normal">云南小香米，源产地直发，当年香米。</p>
                <h5 class="text-danger">￥2.20/斤</h5>
                <p>包邮（偏远地区除外）</p>
              <div class="btn-group" role="group" aria-label="...">
                <button class="btn btn-default bg-success mb-2" data-target="#XmyModal" data-toggle="modal"  th:if="${session.userNum=='Gary'}">修改</button>
                <button class="btn btn-default bg-danger mb-2" data-target="#myModal2" data-toggle="modal"  th:if="${session.userNum=='Gary'}">删除</button>
              </div>
            </div>
            <div class="card-body">
              <div class="carousel-item active">
                <img src="/assets/media/image/shopping/liangyou(1).jpg" class="d-block w-100" alt="111111">
              </div>

            </div>
            <button type="button" class="w-100 btn btn-lg btn-primary">
              <a href="/sShoppingM">立即购买</a></button>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <div class="card-header py-3">
              <p class="my-0 fw-normal">内蒙古呼伦贝尔羊肉，源产地直发，现摘现发。</p>
                <h5 class="text-danger">￥29.80/斤</h5>
                <p>包邮（偏远地区除外）</p>
              <div class="btn-group" role="group" aria-label="...">
                <button class="btn btn-default bg-success mb-2" data-target="#XmyModal" data-toggle="modal"  th:if="${session.userNum=='Gary'}">修改</button>
                <button class="btn btn-default bg-danger mb-2" data-target="#myModal2" data-toggle="modal"  th:if="${session.userNum=='Gary'}">删除</button>
              </div>
            </div>
            <div class="card-body">
              <div class="carousel-item active">
                <img src="/assets/media/image/shopping/xuqin(1).jpg" class="d-block w-100" alt="111111">
              </div>

            </div>
            <button type="button" class="w-100 btn btn-lg btn-primary">
              <a href="/sShoppingM">立即购买</a></button>
          </div>
        </div>
      </div>
      <div class="row text-center">
        <div class="col">
          <div class="card">
            <div class="card-header py-3">
              <p class="my-0 fw-normal">小米Note 11 Pro 5G手机官方旗舰店正品11pro+学生新款10pro系列
              </p>
              <h5 class="text-danger">￥2988</h5>
              <p>包邮（偏远地区除外）</p>
              <div class="btn-group" role="group" aria-label="...">
                <button class="btn btn-default bg-success mb-2" data-target="#XmyModal" data-toggle="modal"  th:if="${session.userNum=='Gary'}">修改</button>
                <button class="btn btn-default bg-danger mb-2" data-target="#myModal2" data-toggle="modal"  th:if="${session.userNum=='Gary'}">删除</button>
              </div>
            </div>
            <div class="card-body">
              <div class="carousel-item active">
                <img src="/assets/media/image/shopping/mx(1).jpg" class="d-block w-100" alt="111111">
              </div>

            </div>
            <button type="button" class="w-100 btn btn-lg btn-primary">
              <a href="/sShoppingM">立即购买</a></button>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <div class="card-header py-3">
              <p class="my-0 fw-normal">魅族18X高通骁龙870智能5G手机直面屏幕120Hz官方旗舰店正品
              </p>
              <h5 class="text-danger">￥2998</h5>
              <p>包邮（偏远地区除外）</p>
              <div class="btn-group" role="group" aria-label="...">
                <button class="btn btn-default bg-success mb-2" data-target="#XmyModal" data-toggle="modal"  th:if="${session.userNum=='Gary'}">修改</button>
                <button class="btn btn-default bg-danger mb-2" data-target="#myModal2" data-toggle="modal"  th:if="${session.userNum=='Gary'}">删除</button>
              </div>
            </div>
            <div class="card-body">
              <div class="carousel-item active">
                <img src="/assets/media/image/shopping/mz(1).jpg" class="d-block w-100" alt="111111">
              </div>

            </div>
            <button type="button" class="w-100 btn btn-lg btn-primary">
              <a href="/sShoppingM">立即购买</a></button>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <div class="card-header py-3">
              <p class="my-0 fw-normal">HONOR/荣耀60 5G手机高通骁龙芯片 AI识别 Vlog隔空换镜</p>
              <h5 class="text-danger">￥2840</h5>
              <p>包邮（偏远地区除外）</p>
              <div class="btn-group" role="group" aria-label="...">
                <button class="btn btn-default bg-success mb-2" data-target="#XmyModal" data-toggle="modal"  th:if="${session.userNum=='Gary'}">修改</button>
                <button class="btn btn-default bg-danger mb-2" data-target="#myModal2" data-toggle="modal"  th:if="${session.userNum=='Gary'}">删除</button>
              </div>
            </div>
            <div class="card-body">
              <div class="carousel-item active">
                <img src="/assets/media/image/shopping/ry(1).jpg" class="d-block w-100" alt="111111">
              </div>

            </div>
            <button type="button" class="w-100 btn btn-lg btn-primary">
              <a href="/sShoppingM">立即购买</a></button>
          </div>
        </div>
      </div>


    </div>
    <!-- end::container -->

  </div>
  <!-- end::main-content -->

  <!-- begin::footer -->
  <footer th:replace="commons/layout::main_footer">

  </footer>
  <!-- end::footer -->

</div>
<!-- end::main -->

<div th:replace="commons/layout::end">
</div>

<script type="text/javascript">
  var EmImg = ""; //定义初始头像  我这里定义为空

  //初始化fileinput
  var FileInput = function () {
    var oFile = new Object();

    //初始化fileinput控件（第一次初始化）
    oFile.Init = function (ctrlName, uploadUrl) {
      var control = $('#' + ctrlName);

      //初始化上传控件的样式
      control.fileinput({
        language: 'zh', //设置语言
        uploadUrl: uploadUrl, //上传的地址
        allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
        showUpload: true, //是否显示上传按钮
        showCaption: false,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式
        //dropZoneEnabled: false,//是否显示拖拽区域
        //minImageWidth: 50, //图片的最小宽度
        //minImageHeight: 50,//图片的最小高度
        //maxImageWidth: 1000,//图片的最大宽度
        //maxImageHeight: 1000,//图片的最大高度
        //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
        //minFileCount: 0,
        maxFileCount: 1, //表示允许同时上传的最大文件个数
        enctype: 'multipart/form-data',
        validateInitialCount: true,
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
      });

      //导入文件上传完成之后的事件
      $("#txt_file").on("fileuploaded", function (event, data, previewId, index) {

        var data = data.response;
        var last = data.lastIndexOf("Upload");
        EmImg = data.substring(last + 7);
        //document.getElementById('videoForm').outerHtml = document.getElementById('videoForm').outerHtml;
        //document.getElementById("videoForm").reset();
        $("#Modal").modal('hide');
        $("#imgEmdImg").attr("src", "../FileUpload/Upload/" + EmImg);
        //alert(EmImg);
        // 1.初始化表格
        var oTable = new TableInit();
        oTable.Init(data);
      });

      $("#Xtxt_file").on("fileuploaded", function (event, data, previewId, index) {

        var data = data.response;
        var last = data.lastIndexOf("Upload");
        EmImg = data.substring(last + 7);
        //document.getElementById('videoForm').outerHtml = document.getElementById('videoForm').outerHtml;
        //document.getElementById("videoForm").reset();
        $("#Modal").modal('hide');
        $("#XimgEmdImg").attr("src", "../FileUpload/Upload/" + EmImg);
        //alert(EmImg);
        // 1.初始化表格
        var oTable = new TableInit();
        oTable.Init(data);
      });
    }
    return oFile;
  };
</script>

</body>
</html>


